// import TableFilterMixin from '@/mixins/TableFilterMixin'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import Dialog from '../dialog/Index'
import { Carousel, Image } from 'ant-design-vue'
import { LeftCircleOutlined } from '@ant-design/icons-vue'

@Component
export class PlayVideoView extends Render {
    @Prop() show!: boolean
    @Prop() src!: string | string[]
    @Prop({ default: true }) autoPlay?: boolean

    showDialog = false

    itemIndex = 0

    videoAccepit = ['.mp4', '.mkv', '.avi', '.flv', '.mov', '.wmv', '.rmvb', '.rm', '.mpeg', '.mpg']

    refs = {} as {
        [key: string]: HTMLVideoElement
    }

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }
    @Watch('show')
    handleWatchShow() {
        this.showDialog = this.show
    }

    @Watch('showDialog')
    handleWatchShowDialog() {
        this.updateShow(this.showDialog)
        if (this.showDialog) {
            this.$nextTick(() => {
                this.refs?.['video0']?.play()
            })
        } else {
            for (const key in this.refs) {
                this.refs[key]?.load()
            }
        }
    }

    get VideoList() {
        return Array.isArray(this.src) ? this.src : [this.src]
    }

    isVideo(file: string) {
        return this.videoAccepit.some((i) => file.endsWith(i))
    }

    createRefs(el: HTMLVideoElement, index: number) {
        this.refs[`video${index}`] = el
    }

    canAutoPlay(index: number) {
        return this.showDialog ? index === this.itemIndex : false
    }

    onChange(newIndex: number) {
        this.$nextTick(() => {
            for (const key in this.refs) {
                this.refs[key]?.pause()
            }
            this.refs[`video${newIndex}`]?.play()
        })
    }

    render() {
        return (
            <Dialog v-model:show={this.showDialog}>
                <Carousel autoplay={false} arrows afterChange={this.onChange} v-slots={{
                    prevArrow: () => {
                        <div>
                            <LeftCircleOutlined />
                        </div>
                    },
                    nextArrow: () => {
                        <LeftCircleOutlined />
                    },
                }}>
                    {this.VideoList.map((i, index) => {
                        return (
                            <div class="h-600px">
                                {this.isVideo(i) ? (
                                    <video
                                        height={600}
                                        ref={(el) => this.createRefs(el as HTMLVideoElement, index)}
                                        controls
                                        src={i}
                                    ></video>
                                ) : (
                                    <Image class="w-full h-full" preview={false} src={i}></Image>
                                )}
                            </div>
                        )
                    })}
                </Carousel>
            </Dialog>
        )
    }
}

export default toNative<{ src: string[] }, {}>(PlayVideoView)
